<template>
  <div id="app">
    <!-- 参数选择区域 -->
    <el-form label-position="left" label-width="80px">
      <el-row>
        <el-form-item label="地区:" style="float: right; padding: 25px 15px 0">
          <el-select v-model="queryParams.rid" placeholder="请选择省份" filterable @change="regionChanged">
            <el-option v-for="item in regionList" :key="item.rid" :label="item.rname" :value="item.rid"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间:" style="float: right; padding: 25px 15px 0">
          <el-select v-model="queryParams.fmid" placeholder="请选择时间" @change="timeChanged">
            <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="算法:" style="float: left; padding: 25px 15px 0">
          <el-select style="width: 220%" v-model="selectedMethod" multiple placeholder="请选择算法" @change="methodChanged">
            <el-option v-for="item in methodOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <el-row> </el-row>
    </el-form>
    <!-- 表格区域 -->
    <el-card>
      <el-table v-loading="loading" :data="tableData" style="width: 100%; height: 220px">
        <el-table-column prop="method" label="算法"> </el-table-column>
        <el-table-column prop="cpi1" label="食品"> </el-table-column>
        <el-table-column prop="cpi2" label="衣着"> </el-table-column>
        <el-table-column prop="cpi3" label="医疗保健"> </el-table-column>
        <el-table-column prop="cpi4" label="交通通讯"> </el-table-column>
        <el-table-column prop="cpi5" label="娱乐文化"> </el-table-column>
        <el-table-column prop="cpi6" label="居住"> </el-table-column>
        <el-table-column prop="cpi7" label="设备用品"> </el-table-column>
        <el-table-column prop="cpi8" label="服务项目"> </el-table-column>
      </el-table>
    </el-card>

    <!-- 图表区域 -->
    <el-card>
      <div id="line" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
import { listRegion, listFutureCpi } from '@/api/cpi/cpi'
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 时间选项
      timeOptions: [
        {
          value: '1',
          label: '2023-06'
        },
        {
          value: '2',
          label: '2023-07'
        },
        {
          value: '3',
          label: '2023-08'
        }
      ],
      // 被选中算法
      selectedMethod: [],
      // 算法选项
      methodOptions: [
        {
          value: '1',
          label: 'XGBoost算法'
        },
        {
          value: '2',
          label: '非线性SVM算法'
        },
        {
          value: '3',
          label: 'Softmax回归分类预测算法'
        }
      ],
      // 表格数据
      tableData: [
        // {
        //   method: 'XGBoost算法',
        //   cpi1: '1',
        //   cpi2: '2',
        //   cpi3: '3',
        //   cpi4: '4',
        //   cpi5: '5',
        //   cpi6: '6',
        //   cpi7: '7',
        //   cpi8: '8'
        // }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        // 预测月份id
        fmid: null,
        rid: null
      },
      // 省份表格数据列表
      regionList: [],

      // 图表配置
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['XGBoost算法', '非线性SVM算法', 'Softmax回归分类预测算法']
        },
        xAxis: [
          {
            type: 'category',
            data: ['食品', '衣着', '医疗保健', '交通通讯', '娱乐文化', '居住', '设备用品', '服务项目'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 90,
            max: 120,
            interval: 5
          }
        ],
        series: [
          {
            name: 'XGBoost算法',
            type: 'bar',
            data: []
          },
          {
            name: '非线性SVM算法',
            type: 'bar',
            data: []
          },
          {
            name: 'Softmax回归分类预测算法',
            type: 'bar',
            data: []
          }
        ]
      }
    }
  },
  methods: {
    // 图表显示
    setLine() {
      let myEcharts = this.$echarts.init(document.getElementById('line'))
      this.option && myEcharts.setOption(this.option, true, false)
    },
    /** 查询地区列表 */
    getRegionList() {
      listRegion(this.queryParams)
        .then((response) => {
          this.regionList = response.rows
        })
        .then(() => {
          this.regionList.pop()
        })
    },
    // 新建行
    pushRow(method) {
      this.loading = true
      listFutureCpi(this.queryParams)
        .then((response) => {
          // console.log(response.rows)
          let obj = {
            method: method
          }
          let dataIndex = 0
          if (method === 'XGBoost算法') {
            dataIndex = 0
          } else if (method === '非线性SVM算法') {
            dataIndex = 1
          } else {
            dataIndex = 2
          }
          // console.log(dataIndex)
          response.rows.forEach((item, index) => {
            obj['cpi' + (index + 1)] = item.fcpi
            this.option.series[dataIndex].data.push(item.fcpi)
          })
          this.tableData.push(obj)
        })
        .then(() => {
          console.log(this.option.series)
          this.setLine()
          this.loading = false
        })
    },
    // 选项变化
    regionChanged() {
      // console.log(this.queryParams.rid)
      this.methodChanged()
    },
    timeChanged() {
      // console.log(this.queryParams.fmid)
      this.methodChanged()
    },
    methodChanged() {
      // console.log(this.selectedMethod)
      this.tableData = []

      this.option.series[0].data = []
      this.option.series[1].data = []
      this.option.series[2].data = []
      this.selectedMethod.forEach((item) => {
        if (item === '1') {
          item = 'XGBoost算法'
          this.queryParams.meid = 1
          if (this.queryParams.fmid && this.queryParams.rid) {
            this.pushRow(item)
          }
        } else if (item === '2') {
          item = '非线性SVM算法'
          this.queryParams.meid = 2
          if (this.queryParams.fmid && this.queryParams.rid) {
            this.pushRow(item)
          }
        } else {
          item = 'Softmax回归分类预测算法'
          this.queryParams.meid = 3
          if (this.queryParams.fmid && this.queryParams.rid) {
            this.pushRow(item)
          }
        }
      })
    }
  },
  mounted() {
    this.getRegionList()
  }
}
</script>

<style>
.el-table {
  padding: 10px;
}
.el-card {
  margin: 15px;
}
</style>
